//tab的选择
.content-tab{
    >ul{
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 0;
        list-style: none;
        padding: .75rem 0;
        >li{
            .tab-link{
                display: flex;
                align-items: center;
                transition: background-color 0.3s ease, color 0.3s ease;
                cursor: pointer;
                position: relative;
                padding: 1rem;
                margin: 0 .75rem 0 0;
                font-weight: normal;
                color: #495057;
                text-decoration: none;
                &.active{
                    color: #fff;
                    &::before{
                        transform: scale(1);
                        border-radius: .25rem;
                        opacity: 1;
                    }
                }
                &:hover{
                    span{
                        color: #fff;
                    }
                    &::before{
                        transform: scale(1);
                        border-radius:.25rem;
                        opacity:1;
                    }
                }
                &::before{
                    transform: scale(0);
                    width: 100%;
                    left: 0;
                    content: "";
                    position: absolute;
                    display: block;
                    background: #3f6ad8;
                    transition: all .2s;
                    height: 70%;
                    top: 15%;
                    z-index: 4;
                    bottom: auto;
                    box-shadow: 0 16px 26px -10px rgba(63,106,216,0.56), 0 4px 25px 0px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(63,106,216,0.2);
                    border-radius: 100%;
                    opacity: .5;
                }
                span{
                    position: relative;
                    z-index: 5;
                }
            }
        }
    }
}